<template>
	<view class="container">
		<!-- 测试卡片区域 -->
		<view class="test-section">
			<view class="section-title">心理测试</view>
			<view class="test-grid">
				<view class="test-card" @click="doMindTest('1')">
					<view class="test-icon">
						<u-icon name="heart-fill" color="#6c8eef" size="40"></u-icon>
					</view>
					<view class="test-content">
						<text class="test-title">自我心理测试</text>
						<text class="test-desc">全面了解自己的心理状态</text>
					</view>
				</view>

				<view class="test-card" @click="doMindTest('2')">
					<view class="test-icon">
						<u-icon name="star-fill" color="#6c8eef" size="40"></u-icon>
					</view>
					<view class="test-content">
						<text class="test-title">孤独感测试</text>
						<text class="test-desc">评估当前的孤独感水平</text>
					</view>
				</view>

				<view class="test-card" @click="doMindTest('3')">
					<view class="test-icon">
						<u-icon name="heart-fill" color="#6c8eef" size="40"></u-icon>
					</view>
					<view class="test-content">
						<text class="test-title">焦虑测试</text>
						<text class="test-desc">测量焦虑程度及其表现</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 历史记录区域 -->
		<!-- <view class="section history-section">
			<view class="section-header">
				<view class="section-title">历史记录</view>
				<view class="section-subtitle">查看您的测试历史</view>
			</view>
			<view class="history-list">
				<view v-if="historyList.length === 0" class="empty-state">
					<u-icon name="info-circle" color="#6c8eef" size="48"></u-icon>
					<text class="empty-text">暂无测评记录</text>
					<text class="empty-tip">开始一个测评，了解自己</text>
				</view>
				<view v-else class="history-item" v-for="(item, index) in historyList" :key="index" @click="viewHistoryDetail(item)">
					<view class="history-info">
						<view class="history-title">{{item.testName}}</view>
						<view class="history-date">{{item.date}}</view>
					</view>
					<view class="history-score">
						<text class="score-label">得分：</text>
						<text class="score-value">{{item.score}}</text>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 底部区域 -->
		<view class="footer">
			<text class="footer-tip">测评结果仅供参考，如有需要请咨询专业心理医生</text>
			<!-- <button class="consult-btn" @click="toConsultPage">立即咨询</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				historyList: [] // 历史记录列表
			}
		},
		onShow() {
			// 每次显示页面时更新历史记录
			// const token = uni.getStorageSync('uni_id_token');
			// if (token) {
			// 	uniCloud.callFunction({
			// 		name: 'getTestHistory',
			// 		data: { uniIdToken: token }
			// 	}).then(res => {
			// 		if (res.result.code === 0) {
			// 			this.historyList = res.result.data;
			// 		}
			// 	}).catch(err => {
			// 		console.error('获取历史记录失败:', err);
			// 	});
			// }
		},
		methods: {
			doMindTest(testId) {
				uni.navigateTo({
					url: `/testPages/mindTest/mindTest?testId=${testId}&fromHome=true`
				});
			},
			viewHistoryDetail(item) {
				uni.navigateTo({
					url: `/testPages/result/result?result=${encodeURIComponent(JSON.stringify(item.result))}&testId=${item.testId}&fromHistory=true`
				});
			},
			toConsultPage() {
				uni.switchTab({
					url: '/pages/consultants/consult'
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 全局变量 */
	:root {
		--primary-color: #6c8eef;
		--primary-hover: #5a7de0;
		--secondary-color: #f8f9fa;
		--text-color: #2c3e50;
		--border-color: #dee2e6;
		--shadow-sm: 0 4rpx 8rpx rgba(0,0,0,0.05);
		--shadow-md: 0 8rpx 12rpx rgba(0,0,0,0.1);
		--shadow-lg: 0 16rpx 32rpx rgba(0,0,0,0.1);
		--radius-sm: 16rpx;
		--radius-md: 24rpx;
		--radius-lg: 32rpx;
		--spacing-sm: 16rpx;
		--spacing-md: 32rpx;
		--spacing-lg: 48rpx;
	}

	/* 主内容区样式 */
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		padding: 40rpx 30rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 30rpx;
		padding-left: 20rpx;
		border-left: 8rpx solid #6c8eef;
	}

	.test-section {
		margin-bottom: 60rpx;
	}

	.test-grid {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.test-card {
		background: white;
		border-radius: 24rpx;
		padding: 40rpx;
		display: flex;
		align-items: flex-start;
		gap: 30rpx;
		box-shadow: 0 8rpx 16rpx rgba(108, 142, 239, 0.1);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;
		width: 100%;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, #6c8eef 0%, #5a7de0 100%);
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		&:active {
			transform: translateY(-2rpx);
			box-shadow: 0 12rpx 24rpx rgba(108, 142, 239, 0.2);

			&::before {
				opacity: 1;
			}

			.test-content {
				.test-title, .test-desc {
					color: white;
				}
			}

			.test-icon {
				color: white;
			}
		}
	}

	.test-icon {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(108, 142, 239, 0.1);
		border-radius: 20rpx;
		transition: all 0.3s ease;
	}

	.test-content {
		flex: 1;
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.test-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
		transition: color 0.3s ease;
	}

	.test-desc {
		font-size: 24rpx;
		color: rgba(108, 117, 125, 0.6);
		transition: color 0.3s ease;
		line-height: 1.4;
	}

	.history-section {
		margin-bottom: 60rpx;
	}

	.history-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.history-item {
		background: white;
		border-radius: 24rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 4rpx 12rpx rgba(108, 142, 239, 0.1);
		transition: all 0.3s ease;

		&:active {
			transform: translateY(-2rpx);
			box-shadow: 0 8rpx 16rpx rgba(108, 142, 239, 0.2);
		}
	}

	.history-info {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.history-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #2c3e50;
	}

	.history-date {
		font-size: 24rpx;
		color: #6c757d;
	}

	.history-score {
		display: flex;
		align-items: center;
		gap: 16rpx;
		padding: 8rpx 20rpx;
		background: rgba(108, 142, 239, 0.1);
		border-radius: 20rpx;
	}

	.score-label {
		font-size: 26rpx;
		color: #6c8eef;
	}

	.score-value {
		font-size: 26rpx;
		color: #6c8eef;
		font-weight: 500;
	}

	.empty-state {
		background: white;
		border-radius: 24rpx;
		padding: 60rpx 40rpx;
		text-align: center;
		box-shadow: 0 4rpx 12rpx rgba(108, 142, 239, 0.1);
	}

	.empty-text {
		font-size: 32rpx;
		color: #2c3e50;
		margin: 20rpx 0 12rpx;
		display: block;
	}

	.empty-tip {
		font-size: 26rpx;
		color: #6c757d;
	}

	.footer {
		text-align: center;
		padding: 40rpx 0;
	}

	.footer-tip {
		font-size: 24rpx;
		color: #6c757d;
		margin-bottom: 30rpx;
		display: block;
	}

	.consult-btn {
		display: inline-block;
		padding: 24rpx 64rpx;
		background: linear-gradient(135deg, #6c8eef 0%, #5a7de0 100%);
		color: white;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		border: none;
		box-shadow: 0 8rpx 16rpx rgba(108, 142, 239, 0.2);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, #5a7de0 0%, #6c8eef 100%);
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
			transform: translateX(-100%);
			transition: transform 0.6s ease;
		}

		&:active {
			transform: translateY(-2rpx);
			box-shadow: 0 12rpx 20rpx rgba(108, 142, 239, 0.3);

			&::before {
				opacity: 1;
			}

			&::after {
				transform: translateX(100%);
			}
		}
	}

	@media screen and (min-width: 690px) {
		.container {
			max-width: 800rpx;
			margin: 0 auto;
		}
	}
</style> 